﻿@{
    ViewBag.Title = "ko简单案列";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
    <script type="text/javascript" src="~/Content/js/jquery/jquery-1.8.1.min.js" ></script>
    <script type="text/javascript" src="~/Content/js/core/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="http://knockoutjs.com/examples/resources/knockout.simpleGrid.js"></script>

<script type="text/javascript">
    var testStr = "sssss    vvvvv";
    var result = iGetInnerText(testStr);
    alert(result);
    function iGetInnerText(testStr) {
        var resultStr = testStr.replace(/[\r\n]/g, ""); //去掉回车换行
        resultStr = testStr.replace(/[ ]/g, "");    //去掉空格
        resultStr = testStr.replace(/\ +/g, "");  //去掉空格
        return resultStr;
    }
</script>
    <script type="text/javascript">
       //名称测试 start
    var viewModel = {
        firstName: ko.observable("Tom"),
        lastName:ko.observable("Jim")
    }
    viewModel.fullName = ko.dependentObservable(function () {
        return viewModel.firstName() + "/" + viewModel.lastName();
    });
    
    //ko.applyBindings(viewModel, document.getElementById("nameDemo"));
        //end

        //点击测试 start
        var clickCounterViewModel = function () {
            this.numberOfClicks = ko.observable(0);

            this.registerClick = function () {
                this.numberOfClicks(this.numberOfClicks() + 1);

            }

            this.hasClickedTooManyTimes = ko.dependentObservable(function () {
                return this.numberOfClicks() >= 3;
            }, this);
        };

        //ko.applyBindings(new clickCounterViewModel(), document.getElementById("butDemo"));
        //end

        //操作数组 start
        var viewModel2 = {};
        viewModel2.items = ko.observableArray(["张三", "李四", "王五"]);
        viewModel2.itemToAdd = ko.observable("");
        viewModel2.addItem = function () {
            if (viewModel2.itemToAdd() != "") {
                viewModel2.items.push(viewModel.itemToAdd());
                // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
                viewModel2.itemToAdd("");
                // Clears the text box, because it's bound to the "itemToAdd" observable
            }
        }
        //运用解锁注释
       // ko.applyBindings(viewModel2, document.getElementById("arrDemo"));
      //end

        //这个例子是在上个例子的基础上添加remove item功能（multi-selection）和排序功能。 
        //“remove”和“sort”按钮在不能用的时候会变成disabled状态（例如，没有足够的item来排序）。
        //start
        var betterListModel = function () {
            this.itemToAdd = new ko.observable("");
            this.allItems = new ko.observableArray(["张三", "李四", "王五", "赵六"]);

            // Initial items

            this.selectedItems = new ko.observableArray(["赵六"]);

            // Initial selection 

            this.addItem = function () {
                if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0))
                    // Prevent blanks and duplicates
                    this.allItems.push(this.itemToAdd());
                this.itemToAdd(""); // Clear the text box
            }

            this.removeSelected = function () {
                this.allItems.removeAll(this.selectedItems());
                this.selectedItems([]); // Clear selection
            }
        };
        
        //ko.applyBindings(new betterListModel(), document.getElementById("arrdelDemo"));
        //var jsonData = ko.toJSON(betterListModel);
        
       // alert(jsonData.$_object);
        //end
        //grid测试 start
        var myModel = {
            items: ko.observableArray([
                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { name: "Speedy Coyote", sales: 89, price: 190.00 },
                { name: "Furious Lizard", sales: 152, price: 25.00 },
                { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                { name: "Brooding Dragon", sales: 0, price: 6350 },
                { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ]),

            sortByName: function () {
                this.items.sort(function (a, b) {
                    return a.name < b.name ? -1 : 1;
                });
            }
        };

        myModel.gridViewModel = new ko.simpleGrid.viewModel({
            data: myModel.items,
            columns: [
                { headerText: "Item Name", rowText: "name" },
                { headerText: "Sales Count", rowText: "sales" },
                { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
            ],
            pageSize: 4
        });
        //ko.applyBindings(viewModel, document.getElementById("nameDemo"));
        //ko.applyBindings(new clickCounterViewModel(), document.getElementById("butDemo"));
        //ko.applyBindings(viewModel2, document.getElementById("arrDemo"));
        ko.applyBindings(new betterListModel(), document.getElementById("arrdelDemo"));
        //ko.applyBindings(myModel);


    </script>
  



    }

   <br />
<div style =" width:500px; height:auto;">
    <div id="nameDemo" style=" width:500px; height:50px;">
        <div style="padding-left:100px;">
            您点击了 <span style="color:red" data-bind="text: numberOfClicks">&nbsp;</span> 次

            <button style="width:50px;" data-bind="click: registerClick, enable: !hasClickedTooManyTimes()">点击</button>
        </div>
        <div style="padding-left:100px;" data-bind="visible: hasClickedTooManyTimes">
            您点击次数超过已限定次数，请重置后再点击。
            <button data-bind="click: function() { numberOfClicks(0) }">重置点击</button>
        </div>
    </div>

    <hr />

    <div id="butDemo" style=" width: 500px; height: auto; padding-left: 100px;">
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name: <input data-bind="value: lastName" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
    </div>

    <hr />

    <div id="arrDemo" style=" width: 500px; height: auto; padding-left: 100px;">
        <form data-bind="submit: addItem">
            创建新项:
            <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
            <button type="submit" data-bind="enable: itemToAdd().length > 0">添加</button>
            <p>列表:</p>
            <select multiple="multiple"  data-bind="options: items"> </select>
        </form>
    </div>

    <hr />

    <div id="arrdelDemo" style=" width: 500px; height: auto; padding-left: 100px;">
    <form data-bind="submit:addItem">
        创建新项: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
        <p>列表：</p>
        <select multiple="multiple" data-bind="options:allItems, selectedOptions:selectedItems"> </select>
    </form>
    <div>
        <button data-bind="click: removeSelected, enable: selectedItems().length > 0">Remove</button>
        <button data-bind="click: function() { allItems.sort() }, enable: allItems().length > 1">Sort</button>
    </div>
   </div>

     <hr />

    @*<div id="gridDemo" style=" width: 500px; height: auto; padding-left: 100px;">
        <div data-bind="simpleGrid: gridViewModel"> </div>

        <button data-bind='click: function() { items.push({ name: "New item", sales: 0, price: 100 }) }'>
            Add item
        </button>

        <button data-bind="click: sortByName">
            Sort by name
        </button>

        <button data-bind="click: function() { gridViewModel.currentPageIndex(0) }">
            Jump to first page
        </button>
        </div>*@

    </div>

